//符
//注册页

<template>
  <div class="all_register">
    <div class="bg_register">
      <img
        src="../assets/andrea-rodriguez-m1tTo-2qTCA-unsplash.jpg"
        style="height: 1889px"
        alt=""
        class="reg_bg_pic"
      />
    </div>
    <div class="register">
      <h1 class="title_register">注册</h1>
      <div class="line3"></div>
      <!-- 下面是输入区 -->
      <div class="register_box">
        <div class="avatar">
          <img style="width: 89px; height: 85px" :src="head_img" alt="" />
        </div>
        <!--头像 动态？-->
        <div class="inputBox_info">
          <div class="emailbox_register">
            <div class="word_email_register">邮箱</div>
            <input
              class="inputEmail"
              type="text"
              name="email"
              v-model="email"
            />
            <button class="get_code_register" @click="getCode()">
              获取验证码
            </button>
          </div>
          <div class="securityCode_register">
            <div class="word_code_register">验证码</div>
            <input
              class="inputCode"
              type="text"
              name="securityCode"
              v-model="code"
            />
          </div>
          <div class="set_account">
            <div class="word_user">用户名</div>
            <!--还未进行输入框的样式调整-->
            <input
              ref="username"
              class="inputAccount"
              type="text"
              name="account"
              v-model="username"
              @blur="judgeUsername()"
            />
            <span class="tooltip" v-html="Username" ref="Username"></span>
            <!-- 用户名确认 -->
          </div>
          <div class="set_pwd">
            <div class="word_set_pwd">密码</div>
            <input
              class="inputPwd"
              type="password"
              name="password"
              v-model="password"
              @blur="judgePwd()"
            />
            <span class="tooltip" v-html="Pwd1" ref="Pwd1"></span>
            <!-- 密码确认 -->
          </div>
          <div class="makesure_pwd">
            <div class="word_surepwd">确认密码</div>
            <!--判断-->
            <input
              class="inputPwd"
              type="password"
              name="password"
              v-model="surePwd"
              @blur="judgeSurePwd()"
            />
            <span class="tooltip" v-html="Pwd2" ref="SurePwd"></span>
            <!-- 确认密码确认 -->
          </div>
          <div class="select_sex">
            <div class="sex">您的性别</div>
            <div class="boy">
              男&nbsp;
              <div class="checkbox1" @click="sexBtn()">
                <div class="boy_bg" v-show="boy"></div>
              </div>
              <!--按钮-->
            </div>
            <div class="girl">
              女&nbsp;
              <div class="checkbox2" @click="sexBtn()">
                <div class="girl_bg" v-show="girl"></div>
              </div>
            </div>
          </div>
          <!--地区 -->
          <div class="area_box">
            <div class="word_area">你的地区</div>

            <div class="input_sheng">
              省&nbsp; <input type="text" class="sheng" v-model="sheng" />
            </div>
            <!--  @keyup.enter="getFullArea()" -->
            <div class="input_shi">
              市&nbsp; <input type="text" class="shi" v-model="shi" />
            </div>
          </div>
          <div class="info_box">
            <div class="word_info">个人介绍</div>
            <!-- <input class="input_info" type="textarea" name="infomation" placeholder="写下您的个人介绍"> -->
            <div class="input_info_bigBox">
              <textarea
                class="input_info"
                placeholder="写下您的个人介绍"
                v-model="description"
              ></textarea>
            </div>
          </div>
          <div class="agree_box" @click="agreeBtn()">
            <div class="checkbox3">
              <div class="agree" v-show="agree"></div>
            </div>
            &nbsp;
            <span class="word_agree">我已阅读并接受版权声明</span>
          </div>
          <button class="btn_register" @click="register()">注册</button>
          <div class="login" id="login">
            <router-link to="/loginPwd">已有账号？点击登录</router-link>
          </div>
          <!-- @click="create()" -->
        </div>
      </div>
    </div>
  </div>
  <router-view />
</template>
<script>
export default {
  name: "register",
  components: "",
  data() {
    return {
      boy: false,
      girl: false,
      agree: false,
      head_img: require("../assets/Personal center-1.png") /**动态？ */,
      email: "",
      username: "",
      password: "",
      sex: "",
      sheng: "",
      shi: "",
      area: "",
      description: "",
      code: "", //验证码
      surePwd: "",
      Username: "",
      Pwd1: "",
      Pwd2: "",
    };
  },
  created() {},
  //可定义一些属性，计算属性，本质是一个方法，在使用时把他们的名称当做属性来使用，并不会当做方法调用
  //注意：1、计算属性引用时，不加（），当做普通属性
  //2、只要计算属性function内部所用到的任何data中数据发生变化，立客重新计算
  //3、计算属性的求值结果会被缓存起来，方便下次直接使用，如果依赖的所有data不变，不会重新计算
  computed: {},
  methods: {
    // 判断确认密码
    judgeUsername() {
      if (this.username.length <= 6) {
        // this.$refs.username.style.border = '2px solid #ee6c6c';
        this.Username =
          "<font color='#ee6c6c' size='4px' weight: '600px'>X&nbsp;&nbsp;用户名不得小于6位!</font>";
      } else {
        this.$refs.username.style.border = "";
        this.Username =
          "<font color='green' size='4px' weight: '600px'>√</font>";
      }
    },
    judgePwd() {
      if (escape(this.password).indexOf("%u") != -1) {
        this.Pwd1 =
          "<font color='#ee6c6c' size='4px' weight: '600px'>X&nbsp;&nbsp;密码不得含有中文！</font>";
      } else if (this.password.length <= 5) {
        this.Pwd1 =
          "<font color='#ee6c6c' size='4px' weight: '600px'>X&nbsp;&nbsp;密码不得小于5位!</font>";
      } else {
        this.Pwd1 = "<font color='green' size='4px' weight: '600px'>√</font>";
      }
    },
    judgeSurePwd() {
      if (this.password == "") {
        this.Pwd1 =
          "<font color='#ee6c6c' size='4px' weight: '600px'>X&nbsp;&nbsp;请先输入密码</font>";
        // alert("请先输入密码!");
      } else if (this.surePwd == "") {
        // alert("请再次输入密码确认!");
        this.Pwd2 =
          "<font color='#ee6c6c' size='4px' weight: '600px'>X&nbsp;&nbsp;请输入确认密码</font>";
      } else {
        this.Pwd2 = "<font color='green' size='4px' weight: '600px'>√</font>";
      }
      if (this.surePwd != this.password && this.password != "") {
        // alert("请输入正确密码!");
        this.Pwd2 =
          "<font color='#ee6c6c' size='4px' weight: '600px'>X&nbsp;&nbsp;请确认密码是否正确<font>";
      }
    },

    //  性别选项
    sexBtn() {
      this.boy = this.boy === true ? false : true;
      if (this.boy == true) {
        this.sex = "男";
        this.girl = false;
      } else if (this.boy == false) {
        this.sex = "女";
        this.girl = true;
      }
    },
    // 同意选项
    agreeBtn() {
      this.agree = this.agree === false ? true : false;
    },

    getCode() {
      if (this.email == "") {
        alert("邮箱不能为空!!!");
      }
      if (this.email != "") {
        this.$http
          .post("/email/reg/", {
            email: this.email,
          })
          //回调函数
          .then((res) => {
            if (res.data.code == 20000) {
              alert("发送成功!");
            } else {
              alert("发送验证码失败!");
            }
          });
      }
    },
    register() {
      if (this.username.length > 6 && this.password.length > 5) {
        if (this.agree == false) {
          alert("请点击同意");
        } else {
          if (this.code == "") {
            alert("请填写邮箱验证码!");
          }
          this.area = this.sheng + this.shi;
          this.$http
            .post("/reg/", {
              birth: this.birth,
              email: this.email,
              username: this.username,
              password: this.password,
              sex: this.sex,
              area: this.area,
              description: this.description,
              code: this.code,
            })
            .then((res) => {
              if (res.data.code == 20000) {
                alert("注册成功!即将进入登录页面");
                this.$router.push("/loginPwd");
              } else {
                alert(res.data.msg);
              }
            });
        }
      }
    },
  },
};
</script>
<style scoped>
a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: inherit;
}
.tooltip {
  position: absolute;
  /* width: 0; */
  height: 20px;
  line-height: 20px;
  background-color: transparent;
  left: 1210px;
}
.reg_bg_pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
input {
  outline: none;
  width: 440px;
  height: 60px;
  background: #fff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.35);
  border-radius: 30px;
  letter-spacing: 1px;
  text-indent: 8px;
  font-size: 20px;
  border: 0 none transparent;
}
.all_register {
  position: relative;
  display: flex;
  justify-content: center;

  /* width: 100%; */
  /* width: 1920px; */
  /* height: 1889px; */
  /* margin: 0 auto; */
  /* padding-bottom: 168px; */
}
.bg_register {
  width: 100%;
  height: 100%; /*高已定死  待定*/
  display: flex;
  justify-content: center;
  background-color: gray;
  overflow: hidden;
  position: relative;
}
.bg_regieter img {
  filter: blur(4px);
  width: 110%;
  margin-top: -10px;
}
.bg_register::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 110%;
  height: 100%;
  opacity: 0.3;
  background: #000;
}
.register {
  position: absolute;
  top: 0px;
  width: 1920px;
  /* margin: 0 auto; */
}
/**暂定头像尺寸 */
.avatar {
  margin: 0 auto 72px;
  width: 223px;
  height: 223px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #21262c;
  border-radius: 111px;
}
.title_register {
  text-align: center;
  width: 100%;
  height: 59px;
  font-size: 60px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
  margin-top: 59px;
}
.line3 {
  overflow: hidden;
  margin: 31px auto 51px;
  width: 1435px;
  height: 6px;
  background: #659274;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.54);
  border-radius: 3px;
}
.emailbox_register {
  width: 550px;
  margin: 0 746px 0px 620px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.securityCode_register {
  /* width: 546px; *546 */
  margin: 42px 734px 0 594px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.get_code_register {
  outline: none;
  width: 108px;
  height: 40px;
  margin-left: -196px;
  text-align: center;
  background: #659274;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.34);
  border-radius: 20px;
  border: 0 none transparent;
  font-size: 14px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 41px;
  letter-spacing: 1px;
}
.get_code_register:hover {
  cursor: pointer;
}
.word_email_register {
  /* width: 49px; */
  margin-right: -8px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
}
.word_code_register {
  /* width: 49px; */
  margin-right: 58px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
}
.set_account {
  margin: 42px 734px 0 594px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.word_user {
  margin-right: 58px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
}
.word_set_pwd {
  margin-right: 58px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
}
.set_pwd {
  margin: 42px 734px 0 620px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.word_surepwd {
  margin-right: 58px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
}
.makesure_pwd {
  margin: 42px 734px 0 568px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select_sex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 45px 1013px 54px 566px;

  font-size: 25px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 69px;
}
.sex {
  width: 146px;
  margin-right: 81px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
}
.boy,
.girl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 78px;
  height: 24px;
}
.boy {
  margin: 0 32px 0 0;
}
.checkbox1,
.checkbox2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 18px;
  height: 18px;
  border: 4px solid #659274;
  border-radius: 50%;
  overflow: hidden;
}
.boy_bg,
.girl_bg,
.agree {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  background-color: #fff;
}
/* ------------------------------------ */
.word_area {
  /* width: 103px;
height: 23px; */
  margin-right: 80px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
}
.area_box {
  margin: 0 814px 37px 576px;
  display: flex;
  align-items: center;
}
.sheng,
.shi {
  width: 123px;
  height: 60px;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.95);
  border-radius: 10px;
}
.input_sheng {
  margin-right: 14px;
}
.input_sheng,
.input_shi {
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
}
.info_box {
  margin: 0px 736px 35px 570px;
  display: flex;
}
.word_info {
  /* width: 102px;
height: 24px; */
  margin: 16px 75px 0 0;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
}
/* 文本框内文字未设置好 */
.input_info_bigBox {
  overflow: hidden;
  width: 439px;
  height: 192px;
  border-radius: 30px;
}
.input_info {
  resize: none; /*禁止拉伸*/
  outline: none;
  font-size: 24px;
  width: 424px;
  height: 172px;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.95);
  border-radius: 30px;
  /* line-height: 0px; */
  text-indent: 10px;
  /* overflow: hidden; */
  padding: 10px 5px 10px 10px;
  overflow-x: hidden;
}
.input_info::-webkit-scrollbar {
  width: 12px;
}

/* .input_info::-webkit-scrollbar-track {
    background-color: #e4e4e4;
    border-radius: 100px;
} */ /*方角滑块 */

.input_info::-webkit-scrollbar-thumb {
  background-color: #659274;
  border-radius: 100px;
  cursor: pointer;
}
/*圆角滑块*/

.agree_box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 850px 0 815px;
  cursor: pointer;
}
.checkbox3 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 18px;
  height: 18px;
  border: 4px solid #659274;
  border-radius: 50%;
  overflow: hidden;
}
.agree {
  position: absolute;
  background-color: #fff;
  width: 20px;
  height: 21px;
}
.word_agree {
  /* width: 216px;
height: 18px; */
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
  letter-spacing: 1px;
}

.btn_register {
  display: block;
  width: 440px;
  height: 80px;
  background: #659274;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.54);
  border-radius: 40px;
  margin: 22px 743px 0 737px;
  font-size: 36px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
}
.btn_register:hover {
  cursor: pointer;
}
#login {
  width: 200px;
  margin: 10px auto;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
}
#login a {
  transition: all 0.3s;
}
#login:hover a {
  cursor: pointer;
  color: #659274;
}
</style>